<template>
  <div>
    <div>
      <div class="child">用户相关图表</div>
      <div class="child">
        <el-button size="small" type="primary" @click="toRouter"
          >用户管理</el-button
        >
      </div>
    </div>
    <div id="currenAdd"></div>
    <div>用户年龄段分布</div>
    <div id="userAge"></div>
  </div>
</template>

<script>
let echarts = require("echarts");
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {
    toRouter() {
      this.$router.replace("/usermanage");
    },
    getOption1() {
      return {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: 10,
          data: ["18岁以下", "18~30岁", "30~40岁", "40~60岁", "60岁及以上"],
        },
        series: [
          {
            name: "年龄段",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1557, name: "18岁以下" },
              { value: 4396, name: "18~30岁" },
              { value: 4397, name: "30~40岁" },
              { value: 1800, name: "40~60岁" },
              { value: 443, name: "60岁及以上" },
            ],
          },
        ],
      };
    },
    getOption() {
      return {
        color: ["#12ff55", "#7AB4EE"],
        title: {
          text: "用户数量变化与确诊数量变化的关系图表",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["用户数量", "确诊数量"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          // boundaryGap: false,
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
          },
        },
        series: [
          {
            name: "用户数量",
            type: "line",
            data: [
              15515,
              16986,
              17554,
              18000,
              18119,
              18221,
              18550,
              18666,
              18777,
              20056,
              21156,
              22222,
            ],
          },
          {
            name: "确诊数量",
            type: "line",
            data: [
              12000,
              13554,
              15466,
              16555,
              16353,
              16999,
              16777,
              14500,
              15666,
              17566,
              15555,
              14522,
            ],
          },
        ],
      };
    },
    toDraw() {
      let chart = echarts.init(document.getElementById("currenAdd"));
      let option = this.getOption();
      chart.setOption(option);
    },
    toDraw1() {
      let chart1 = echarts.init(document.getElementById("userAge"));
      let option = this.getOption1();
      chart1.setOption(option);
    },
  },
  created() {},
  mounted() {
    this.toDraw();
    this.toDraw1();
  },
};
</script>
<style scoped>
body {
  overflow: auto;
}
#currenAdd {
  height: 300px;
}
#userAge {
  height: 300px;
}
.child {
  margin-right: 50px;
  display: inline-block;
}
.child:nth-child(2) {
  float: right;
}
</style>